<template>
	<div class="page">
		<!--<x-head></x-head>-->
		<x-header class='header' slot="header" :left-options="{backText: '',preventGoBack:true}">
				<span slot="left" style="margin-left: 12px; color: #fff;" id="back">返回</span>
			</x-header>
		<div class="list">
			<group>
				<x-input title="姓　　名:" placeholder="必填" ref="name" text-align="right" v-model="datas.realName" :required="true" :is-type="nameValid"></x-input>
				<cell title="性　　别:" :value="gender" is-link @click.native='showGenderMenu'></cell>
				<x-input title="身  份  证:" @on-blur="idCardOnblur" @on-change="idCardOnchange" placeholder="必填" ref="idCard" text-align="right" :min="18" :max="18" :required="true" v-model="datas.IdCard" :is-type="idCardValid"></x-input>
				<x-input title="联系方式:" v-model="datas.tel" ref="mobile" name="mobile" text-align="right" placeholder="必填" :max="11" keyboard="number"
               is-type="china-mobile" :required="true"></x-input>
				<x-input title="身高(cm):" v-model="datas.height" ref="height" placeholder="(cm)必填" text-align="right" :required="true" :is-type="heightValid"></x-input>
				<x-input title="体重(kg):" v-model="datas.weight" ref="weight" placeholder="(kg)必填" text-align="right" :required="true" :is-type="weightValid"></x-input>
				<datetime title="出生年月:" v-model="birthday" placeholder="必填" @on-change="datetimeAction" :required="true" format="YYYY-MM-DD" start-date="1900-01-01"></datetime>				
			</group>
		</div>
		<div v-transfer-dom>
			<actionsheet v-model="showGender" :menus="menusGender" :close-on-clicking-mask="false" @on-click-menu='clickGendermeunu'>
			</actionsheet>
		</div>
		<x-button style='' class='btn' @click.native="keep">确认提交</x-button>
	</div>
</template>

<script>
	import Api from '@/api/index.js' //  引入api文件
	import xHead from '@/components/common/Head.vue'
	export default {
		components: {
			xHead
		},
		data() {
			return {
				//  姓名
				nameValid(value){
					return {
						valid: value.length !== ''
					}
				},
				// 身份证验证
				idCardValid(value){
					return {
                        valid: value.length === 18,
                         msg: "验证码有误!"
                    }
				},
				// 身高验证
				heightValid(value){
					return {
						valid: value.length !== '',
                        msg: "验证码有误!"
					}
				},
				// 体重验证
				weightValid(value){
					return {
						valid: value.length !== '',
                        msg: "验证码有误!"
					}
				},
				gender: '',
				birthday: '',
				showGender: false,
				menusGender: {
					male: '男',
					female: '女'
				},
				datas: {
					realName: '',
					gender: '',
					IdCard: '',
					tel: '',
					height: '',
					weight: '',
					birthday: ''
				}
			}
		},
		methods: {
			//  身份证 输入身份证，出身年月自己填写   @on-blur
			idCardOnblur(value){
				if(value.length !== 18){
					this.datas.IdCard = ''
					this.$vux.toast.show({
						text: '请输入正确的身份证号',
						type: 'cancel'
					})
				}
			},
			//  身份证 输入身份证，出身年月自己填写    @on-change
			idCardOnchange(value){
				if(value.length == 18) {
					let idCard = value;
					var year = idCard.slice(6,10);   //   出生年
	            	var month = idCard.slice(10,12);		//  出生月
	            	var day = idCard.slice(12,14);	//  出生日
	            	var arr = [];
	            	arr.push(year);
	            	arr.push(month);
	            	arr.push(day);
	            	arr = arr.join('-')
	            	this.birthday = arr;
				} else {
					this.birthday = '';
				}
				
			},
			//  显示选择男女 菜单
			showGenderMenu() {
				this.showGender = true;
			},
			//  选择男女菜单 选择
			clickGendermeunu(menuKey, menuItem) {
				this.gender = menuItem;
				if(menuItem === '男') {
					this.datas.gender = '1'
				} else if (menuItem === '女'){
					this.datas.gender = '2'
				}
				
			},
			// 选择时间
			datetimeAction(value) {
				//  日期转时间戳
				this.datas.birthday = Date.parse(new Date(value));
			},
			// 提交
			keep(){
				console.log(this.datas)
				if(this.datas.realName !== '' && this.gender !== '' 
					&& this.datas.IdCard !== '' && this.datas.tel !== '' 
					&& this.datas.height !== '' && this.datas.weight !== '' && this.datas.birthday !== ''
				){
					console.log(1)
					let param = new URLSearchParams()
					param.append('realName', this.datas.realName)
					param.append('gender', this.datas.gender)
					param.append('IdCard', this.datas.IdCard)
					param.append('tel', this.datas.tel)
					param.append('height', this.datas.height)
					param.append('weight', this.datas.weight)
					param.append('birthday', this.datas.birthday)
					this.$http({
						method: 'post',
						url: Api.health_recordAddApi,
						data: param
					})
					.then(({data})=>{
						if(data.message == 'success'){
							this.$router.push({
								path: '/datamonitor'
							})
							this.$vux.toast.show({
								text: '保存档案成功!',
								type: 'success'
							})
						} else if(data.status === 45) {
							this.$vux.toast.show({
								text: '该身份证号已存在!',
								type: 'warn'
							})
						} else if(data.status === 46){
							this.$vux.toast.show({
								text: '该用户的手机号已存在!',
								type: 'warn'
							})
						}
					})
					.catch((err)=>{
						console.log(err)
					})
				} else {
					this.$vux.toast.show({
						text: '资料未填写完整',
						type: 'cancel'
					})
				}
			}
		},
		mounted(){
			var _this = this;
			//  如果没有人员的话 点击返回就返回app，有的话就返回数据检测页面
			if(localStorage.getItem('customer_id') == null) {
				document.getElementById('back').onclick = function() {
					android.showToast("000000");
				}
			} else {
				document.getElementById('back').onclick = function() {
					_this.$router.back();
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.list{
	position: absolute;
	top: 50px;
	left: 0;
	right: 0;
	bottom: 0;
}
.btn{
	position: absolute !important;
	left: 0 !important;
	bottom: 0 !important;
	background: rgb(58,175,252); 
	color: #fff;
}
</style>